<div class="bjui-pageContent">
    <div class="bjui-row col-3">
        <form action="/admin/personnel/train/train-question-add" data-toggle="ajaxform" data-options="{
            closeCurrent: true,
            okAfterCallback: refreshDataGrid,
            {{--confirmMsg:'确认提交?'--}}
            beforeSubmit:verifyForm
            {{--beforeSubmit: checkAddPlanFormData,--}}
        }">
            {{ csrf_field() }}
            <div>
                <label class="row-label max-width-10">试题内容:</label>

                <div class="row-input required">
                    <textarea cols="30" rows="4" placeholder="请输入您的问题" data-rule="required" name="question" disabled>{{ $trainQuestionInfo['question']  }}
                    </textarea>
                </div>
            </div>
            <div>
                <label class="row-label max-width-10">试题类型</label>

                <div class="row-input required">
                    <select data-toggle="selectpicker" data-width="100" id="type" disabled>
                        <option value="1" @if( $trainQuestionInfo['type'] ==1) selected @endif>单选题</option>
                        <option value="2" @if( $trainQuestionInfo['type'] ==2) selected @endif>多选题</option>
                        <option value="3" @if( $trainQuestionInfo['type'] ==3) selected @endif>判断题</option>
                        <option value="4" @if( $trainQuestionInfo['type'] ==4) selected @endif>简答题</option>
                    </select>
                    <input type="hidden" value="{{$trainQuestionInfo['type']}}" name="type">
                </div>
            </div>
            <div>
                <label class="row-label max-width-10">分值:</label>
                <div class="row-input required">
                    <input type="number" name="score" min="0" max="10" class="" value="{{$trainQuestionInfo['score']}}" disabled>
                </div>
            </div>
            <div>
                <label class="row-label max-width-10">答案选项</label>

                <div class="row-input required">
                    {{-- 判断题 --}}
                    @if( $trainQuestionInfo['type'] ==3)
                        <div  class="decide-answer-wrapper">
                            @foreach($answerList as $answer)
                                <input type="radio" @if($answer['is_correct_answer']==1) checked @endif name="decide-answer" value="1" disabled> {{$answer['answer']}}
                            @endforeach
                        </div>
                    @endif
                    <textarea cols="30" rows="4" class="answer-textarea" placeholder="请输入您的答案" name="answer-textarea"
                            {{--<textarea cols="30" rows="4" class="answer-textarea" placeholder="请输入您的答案" data-rule="required" name="answer"--}}
                              style="display: none;"></textarea>
                    <ul class="list-group list-unstyled answer-wrapper " style="width: 500px;">

                        @if( $trainQuestionInfo['type'] ==1 || $trainQuestionInfo['type'] ==2)
                            @foreach($answerList as $answer)
                                <li class="list-group-item">
                                    <div>
                                        <span>正确答案</span>
                                        {{-- 单选 --}}
                                        @if( $trainQuestionInfo['type'] == 1 )
                                            <input type="radio" name="correct-answer[]" value="0" @if($answer['is_correct_answer']==1) checked @endif disabled>
                                        {{-- 多选 --}}
                                        @elseif($trainQuestionInfo['type'] == 2)
                                            <input type="checkbox" name="correct-answer[]" value="0" @if($answer['is_correct_answer']==1) checked @endif disabled>
                                        @endif
                                            <button type="button" class="close hidden" aria-label="Close" title="删除">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <input type="text" name="answer[]" placeholder="请输入选项内容" value="{{$answer['answer']}}" disabled>
                                </li>
                            @endforeach
                        @endif
                        <li class="list-group-item text-center hidden">
                            <button type="button" class="add-answer btn-blue">
                                <span class="glyphicon glyphicon-plus">添加</span>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>

        </form>

    </div>

</div>
<div class="bjui-pageFooter hidden">
    <ul>
        <li>
            <button type="button" class="btn-close" data-icon="close">取消</button>
        </li>
        <li>
            <button type="submit" class="btn-default" data-icon="save">保存</button>
        </li>
    </ul>
</div>
<style>
    .max-width-10 {
        max-width: 10%;
    }
</style>
<script type="text/javascript">
    var type = 1;
    var answerWrapper = $.CurrentNavtab.find('.answer-wrapper');
//    var answerTextarea = $.CurrentNavtab.find('.answer-textarea');
    var addAnswerBtn = $.CurrentNavtab.find('.add-answer');
    var decideAnswerWrapper = $.CurrentNavtab.find('.decide-answer-wrapper');

    function refreshTrainList() {
        $('#company-address-list').datagrid('refresh', true);
    }

    //表单提交验证
    function verifyForm() {
        var flag = true;
        answerWrapper.find("input[type=text]:visible").each(function (index, val) {
            if ($(this).val() == "") {
                flag = false;
                BJUI.alertmsg('warn', '请填写完整答案');
                return false;
            }
        });
        if (!flag) {
            return false;
        }
        if (type == 1) {
            if (answerWrapper.find("input[type=radio]:checked").length == 0) {
                flag = false;
                BJUI.alertmsg('warn', '请选择正确答案');
            }
        }
        if (type == 2) {
            if (answerWrapper.find("input[type=checkbox]:checked").length == 0) {
                flag = false;
                console.log("请选择正确答案")
            }
        }

        return flag;
    }


    $.CurrentNavtab.find('#type').on('change', function () {
        type = $(this).val();
        if (type == 1 || type == 2) {
            answerWrapper.show();
//            answerTextarea.hide();
            decideAnswerWrapper.hide();
        } else if (type == 4) {
            answerWrapper.hide();
//            answerTextarea.show();
            decideAnswerWrapper.hide();
        } else if(type == 3){
            answerWrapper.hide();
//            answerTextarea.hide();
            decideAnswerWrapper.show();
        }

        if (type == 1) {
            answerWrapper.find("input[type=checkbox]").attr('type', 'radio');
        } else if (type == 2) {
            answerWrapper.find("input[type=radio]").attr('type', 'checkbox');
        }
    });
    //删除答案
    answerWrapper.on("click", '.close', function () {
        var that = $(this);
        BJUI.alertmsg('confirm', '删除答案?', {
            okCall: function () {
                that.parents(".list-group-item").remove();
                setCorrectAnswerVal();
            }
        });
    });
    //添加答案
    addAnswerBtn.on("click", function () {
        var str = "";
        if (type == 1) {
            str = ' <li class="list-group-item">'
                    + '<div>'
                    + '<span>正确答案</span><input type="radio" name="correct-answer[]" >'
                    + '<button type="button" class="close" aria-label="Close" title="删除">'
                    + '<span aria-hidden="true">&times;</span>'
                    + '</button>'
                    + '</div>'
                    + '<input type="text" name="answer[]" placeholder="请输入选项内容" class="form-control">'
                    + '</li>';
        } else if (type == 2) {
            str = ' <li class="list-group-item">'
                    + '<div>'
                    + '<span>正确答案</span><input type="checkbox" name="correct-answer[]" >'
                    + '<button type="button" class="close" aria-label="Close" title="删除">'
                    + '<span aria-hidden="true">&times;</span>'
                    + '</button>'
                    + '</div>'
                    + '<input type="text" name="answer[]" placeholder="请输入选项内容" class="form-control">'
                    + '</li>';
        }
        $(this).parents(".list-group-item").before(str);
        setCorrectAnswerVal();
    });

    function setCorrectAnswerVal() {
        answerWrapper.find("input[type!=text]").each(function (index, val) {
            $(this).val(index);
            console.log(index + ":" + val);
        })
    }

</script>